<template>
    <div class="draw-style-edit">
        <div class="draw-style-edit-close">
            <i class="iconfont icon-close" @click="onClose"></i>
        </div>
        <div class="draw-style-edit-border"></div>
        <div class="draw-style-edit-page">
            <div class="draw-style-edit-page-tt">编辑</div>
            <template v-if="styles[graphic.type]['labelList']">
                <DividerLine placement="left">标题</DividerLine>
                <div
                    class="draw-style-edit-page-item"
                    v-for="(item, key) in styles[graphic.type]['labelList']"
                    :key="key"
                >
                    <div class="draw-style-edit-page-item-label">
                        {{ item["label"] }}
                    </div>
                    <component
                        :is="components[item.type]"
                        v-model:value="labelValue[key]"
                        v-bind="item.props"
                    />
                </div>
            </template>
            <template v-if="styles[graphic.type]['styleList']">
                <DividerLine placement="left">其它属性</DividerLine>
                <div
                    class="draw-style-edit-page-item"
                    v-for="(item, key) in styles[graphic.type]['styleList']"
                    :key="key"
                >
                    <div class="draw-style-edit-page-item-label">
                        {{ item["label"] }}
                    </div>
                    <component
                        :is="components[item.type]"
                        v-model:value="styleValue[key]"
                        v-bind="item.props"
                    />
                </div>
            </template>
            <n-space>
                <n-button type="error" @click="onDelete" size="small">
                    删除
                </n-button>
            </n-space>
        </div>
        <div class="draw-style-edit-rect draw-style-edit-rect-1"></div>
        <div class="draw-style-edit-rect draw-style-edit-rect-2"></div>
        <div class="draw-style-edit-rect draw-style-edit-rect-3"></div>
        <div class="draw-style-edit-top-left-rect"></div>
        <div class="draw-style-edit-bottom-right-rect"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, watch, shallowReactive } from "vue";
import DividerLine from "@/common/demo/DividerLine/index.vue";
import useDrawStore from "./drawStore";
import { storeToRefs } from "pinia";
import SelectLabel from "@/common/SelectLabel/index.vue";
import {
    NInput,
    NInputNumber,
    NColorPicker,
    NSlider,
    NSelect,
    NSwitch,
} from "naive-ui";
import styles from "./styles";

const components = shallowReactive({
    NInput,
    NInputNumber,
    NColorPicker,
    NSlider,
    NSelect,
    NSwitch,
    SelectLabel,
});

const drawStore = useDrawStore();

const { graphic } = storeToRefs(drawStore);

const styleValue = ref({});
const labelValue = ref({});

onMounted(() => {
    styleValue.value = graphic.value.options.style || {};
    labelValue.value = graphic.value.options.style?.label || {};
});

//设置样式
const setStyle = () => {
    let _data = {
        ...styleValue.value,
        label: labelValue.value,
    };
    drawStore.setStyle(_data);
};

//点击关闭按钮
const onClose = () => {
    drawStore.setGraphic(null);
};

//点击删除
const onDelete = () => {
    drawStore.delGraphic();
};

watch(
    () => styleValue.value,
    () => {
        setStyle();
    },
    { deep: true }
);

watch(
    () => labelValue.value,
    () => {
        setStyle();
    },
    { deep: true }
);
</script>
<style lang="less" scoped>
.draw-style-edit {
    position: fixed;
    right: 32px;
    top: 120px;
    z-index: 1001;
    width: 300px;
    animation: show 0.5s forwards ease-in-out;
    &-close {
        position: absolute;
        right: 0px;
        top: -4px;
        i {
            font-size: 16px;
            opacity: 0.6;
            cursor: pointer;
            &:hover {
                opacity: 1;
            }
        }
    }
    &-border {
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        clip-path: polygon(
            8px 100%,
            calc(100% - 8px) 100%,
            100% calc(100% - 8px),
            100% 34px,
            calc(100% - 12px) 22px,
            calc(100% - 64px) 22px,
            calc(100% - 76px) 0,
            8px 0,
            0 8px,
            0 calc(100% - 8px)
        );
        background: var(--primary-color);
    }
    &-rect {
        width: 6px;
        height: 15px;
        position: absolute;
        background: var(--primary-color);
        top: 0;
        right: 54px;
        transform: skew(30deg);
        &-2 {
            right: 42px;
        }
        &-3 {
            right: 30px;
        }
    }
    &-top-left-rect {
        top: -6px;
        left: -6px;
    }
    &-bottom-right-rect {
        bottom: -6px;
        right: -6px;
        transform: rotate(180deg);
    }
    &-page {
        background: var(--bg-color-1);
        padding: 8px 16px 12px;
        box-sizing: border-box;
        clip-path: polygon(
            8px 100%,
            calc(100% - 8px) 100%,
            100% calc(100% - 8px),
            100% 34px,
            calc(100% - 12px) 22px,
            calc(100% - 64px) 22px,
            calc(100% - 76px) 0,
            8px 0,
            0 8px,
            0 calc(100% - 8px)
        );
        background: var(--bg-color-3);
        &-tt {
            font-size: 15px;
            margin-bottom: -8px;
            color: var(--text-color);
        }
        &-item {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            &-label {
                white-space: nowrap;
                min-width: 58px;
                margin-right: 12px;
                font-size: 14px;
                text-align: justify;
                text-align-last: justify;
            }
        }
    }
}

@keyframes show {
    0% {
        transform: translateX(calc(150% + 48px));
    }
    100% {
        transform: translateX(0);
    }
}
</style>
